// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 检查ECharts库是否加载
  if (typeof echarts === 'undefined') {
    return;
  }
  
  var dom = document.getElementById('container');
  
  if (!dom) {
    return;
  }
  
  try {
    window.myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
  } catch (error) {
    return;
  }

  // 初始化WebSocket按钮状态
  updateButtonStates();
  
  console.log('图表容器已初始化，等待无人机列表数据...');
});

// 全局变量
let myChart;
let circleTimer;
let circles = []; // 存储所有圆圈的数据
let series = [];
let uavList = []; // 存储无人机列表
let globalUavLib = []; // 存储完整的无人机库数据
let globalUavNames = []; // 存储无人机名称数组
let uavDetectionCounts = {}; // 存储每个无人机名称+频点的检出次数
let updateTimer = null; // 圆圈更新定时器
let isFiltered = false; // 是否处于过滤状态
let filteredCircles = []; // 过滤后的圆圈数据

// 全局常量
const hours = Array.from({length: 6001}, (_, i) => i);

// WebSocket相关变量
let websocket = null;
let isConnected = false;

// 随机生成圆圈函数
function generateRandomCircle() {
  const uavCount = globalUavNames.length > 0 ? globalUavNames.length : 47;
  const randomDay = Math.floor(Math.random() * uavCount); // 根据无人机数量随机选择
  const randomHour = Math.floor(Math.random() * 6001); // 0-6000
  const initialSize = 1; // 默认直径为1
  
  const circle = {
    day: randomDay,
    hour: randomHour,
    size: initialSize,
    id: Date.now() + Math.random() // 唯一ID
  };
  
  circles.push(circle);
  
  // 更新图表数据
  updateChartData();
  
  // 通过WebSocket发送新圆圈数据
  if (isConnected) {
    sendWebSocketMessage({
      type: 'new_circle',
      data: {
        day: randomDay,
        hour: randomHour,
        size: initialSize
      }
    });
  }
  
  // 启动定时器（如果还没有启动）
  if (!circleTimer) {
    startCircleTimer();
  }
}

// 更新图表数据
function updateChartData() {
  // 清空所有系列的数据
  series.forEach(s => s.data = []);
  
  // 根据过滤状态选择要显示的圆圈数据
  const circlesToShow = isFiltered ? filteredCircles : circles;
  
  // 添加圆圈数据
  circlesToShow.forEach(circle => {
    if (series[circle.day]) {
      series[circle.day].data.push([circle.hour, circle.size]);
    }
  });
  
  // 更新图表
  if (window.myChart) {
    window.myChart.setOption({
      series: series
    });
  }
}

// 启动圆圈定时器
function startCircleTimer() {
  circleTimer = setInterval(() => {
    // 为每个圆圈增加直径
    circles.forEach(circle => {
      circle.size += 1;
    });
    
    // 更新图表
    updateChartData();
    

  }, 1000); // 每1秒执行一次
}

// 停止定时器
function stopCircleTimer() {
  if (circleTimer) {
    clearInterval(circleTimer);
    circleTimer = null;
  }
}

// 启动圆圈更新定时器
function startUpdateTimer() {
  if (updateTimer) {
    return; // 如果定时器已经在运行，不重复启动
  }
  
  updateTimer = setTimeout(() => {
    console.log('⏰ 执行定时更新，当前圆圈数量:', circles.length);
    updateChartData();
    updateTimer = null; // 重置定时器
  }, 2000); // 2秒后更新
}

// 停止圆圈更新定时器
function stopUpdateTimer() {
  if (updateTimer) {
    clearTimeout(updateTimer);
    updateTimer = null;
  }
}

// 过滤圆圈函数
function filterCircles() {
  const filterCount = parseInt(document.getElementById('filter-count').value);
  
  if (isNaN(filterCount) || filterCount < 1) {
    alert('请输入有效的数字（大于等于1）');
    return;
  }
  
  // 按圆圈大小排序，取前N个最大的圆圈
  const sortedCircles = [...circles].sort((a, b) => b.size - a.size);
  filteredCircles = sortedCircles.slice(0, filterCount);
  
  isFiltered = true;
  
  console.log(`🔍 过滤完成：显示前${filterCount}个最大圆圈`);
  console.log('过滤前圆圈数量:', circles.length);
  console.log('过滤后圆圈数量:', filteredCircles.length);
  console.log('过滤后的圆圈:', filteredCircles);
  
  // 更新图表显示
  updateChartData();
}

// 清除过滤函数
function clearFilter() {
  isFiltered = false;
  filteredCircles = [];
  
  console.log('🧹 已清除过滤，显示所有圆圈');
  console.log('当前圆圈总数:', circles.length);
  
  // 更新图表显示
  updateChartData();
}

// 清除所有圆圈函数
function clearAllCircles() {
  circles = [];
  uavDetectionCounts = {}; // 清除检出次数统计
  stopUpdateTimer(); // 停止更新定时器
  isFiltered = false; // 清除过滤状态
  filteredCircles = []; // 清除过滤数据
  updateChartData();
  
  console.log('🧹 已清除所有圆圈、检出统计和过滤状态');
  
  // 通过WebSocket发送清除消息
  if (isConnected) {
    sendWebSocketMessage({
      type: 'clear_circles'
    });
  }
}

// 页面卸载时清理定时器
window.addEventListener('beforeunload', () => {
  stopCircleTimer();
  stopUpdateTimer();
});

// WebSocket连接函数
function connectWebSocket() {
  const ip = document.getElementById('ws-ip').value.trim();
  const port = document.getElementById('ws-port').value.trim();
  
  if (!ip || !port) {
    alert('请输入IP地址和端口号');
    return;
  }
  
  if (isConnected) {
    alert('WebSocket已连接');
    return;
  }
  
  try {
    const wsUrl = `ws://${ip}:${port}`;
    
    updateConnectionStatus('connecting', '连接中...');
    
    websocket = new WebSocket(wsUrl);
    
    websocket.onopen = function(event) {
      isConnected = true;
      updateConnectionStatus('connected', '已连接');
      updateButtonStates();
    };
    
    websocket.onmessage = function(event) {
      try {
        const jsonData = JSON.parse(event.data);
        handleWebSocketData(jsonData);
      } catch (error) {
        // 如果解析失败，尝试使用原来的处理方式
        handleWebSocketMessage(event.data);
      }
    };
    
    websocket.onclose = function(event) {
      isConnected = false;
      websocket = null;
      updateConnectionStatus('disconnected', '连接已断开');
      updateButtonStates();
    };
    
    websocket.onerror = function(error) {
      isConnected = false;
      websocket = null;
      updateConnectionStatus('disconnected', '连接失败');
      updateButtonStates();
    };
    
  } catch (error) {
    updateConnectionStatus('disconnected', '连接失败');
  }
}

// 断开WebSocket连接
function disconnectWebSocket() {
  if (websocket && isConnected) {
    websocket.close();
  }
}

// 更新连接状态显示
function updateConnectionStatus(status, text) {
  const statusElement = document.getElementById('ws-status');
  statusElement.textContent = text;
  statusElement.className = `status-${status}`;
}

// 更新按钮状态
function updateButtonStates() {
  const connectBtn = document.querySelector('.connect-btn');
  const disconnectBtn = document.querySelector('.disconnect-btn');
  const ipInput = document.getElementById('ws-ip');
  const portInput = document.getElementById('ws-port');
  
  if (isConnected) {
    connectBtn.disabled = true;
    disconnectBtn.disabled = false;
    ipInput.disabled = true;
    portInput.disabled = true;
  } else {
    connectBtn.disabled = false;
    disconnectBtn.disabled = true;
    ipInput.disabled = false;
    portInput.disabled = false;
  }
}

// 处理WebSocket消息
function handleWebSocketMessage(data) {
  try {
    const message = JSON.parse(data);
    
    // 根据消息类型处理不同的数据
    if (message.type === 'circle_data') {
      // 处理圆圈数据
      handleCircleData(message.data);
    } else if (message.type === 'clear_circles') {
      // 清除所有圆圈
      clearAllCircles();
    }
    
  } catch (error) {
    // 静默处理错误
  }
}

// 处理圆圈数据
function handleCircleData(circleData) {
  if (Array.isArray(circleData)) {
    // 如果是数组，批量添加圆圈
    circleData.forEach(data => {
      if (data.day !== undefined && data.hour !== undefined && data.size !== undefined) {
        const circle = {
          day: data.day,
          hour: data.hour,
          size: data.size,
          id: Date.now() + Math.random()
        };
        circles.push(circle);
      }
    });
  } else if (circleData.day !== undefined && circleData.hour !== undefined && circleData.size !== undefined) {
    // 如果是单个圆圈数据
    const circle = {
      day: circleData.day,
      hour: circleData.hour,
      size: circleData.size,
      id: Date.now() + Math.random()
    };
    circles.push(circle);
  }
  
  updateChartData();
}

// 发送WebSocket消息
function sendWebSocketMessage(message) {
  if (websocket && isConnected) {
    try {
      const messageStr = JSON.stringify(message);
      websocket.send(messageStr);
    } catch (error) {
      // 静默处理错误
    }
  }
}

// 获取无人机列表
function getUavList() {
  if (websocket && isConnected) {
    const message = JSON.stringify({ msg: 'getUavLib' });
    websocket.send(message);
  } else {
    alert('请先连接到服务器');
  }
}

// 处理WebSocket数据
function handleWebSocketData(data) {
  try {
    if(data.msg == "UAV_OBJECT"){
      // 处理无人机检测数据
      handleUavObject(data);
    } else if(data.msg == "UAV_LIB") {
      // 处理无人机库数据响应
      // 提取无人机名称并更新图表
      extractUavNames(data);
    }
  } catch (error) {
    // 处理非JSON格式的数据
  }
}

// 处理无人机检测数据
function handleUavObject(data) {
  console.log('🎯 检测到无人机:', data);
  
  // 获取无人机名称和频率
  const uavName = data.name;
  const uavFreq = data.freq;
  
  if (!uavFreq) {
    console.log('❌ 无人机数据中没有频率信息');
    return;
  }
  
  // 在全局无人机名称数组中查找对应的索引
  const uavIndex = globalUavNames.indexOf(uavName);
  if (uavIndex === -1) {
    console.log('❌ 未找到无人机名称:', uavName, '在无人机库中');
    return;
  }
  
  // 将频率除以1000进行匹配
  const normalizedFreq = uavFreq / 1000;
  
  // 创建唯一键：无人机名称+频点
  const detectionKey = `${uavName}_${normalizedFreq}`;
  
  // 更新检出次数
  if (!uavDetectionCounts[detectionKey]) {
    uavDetectionCounts[detectionKey] = 0;
  }
  uavDetectionCounts[detectionKey]++;
  
  // 计算圆圈大小：每检出5次增加1的直径，最小直径为1
  const detectionCount = uavDetectionCounts[detectionKey];
  const circleSize = Math.max(1, Math.floor(detectionCount / 5) + 1);
  
  // 检查是否已存在相同位置的圆圈
  const existingCircleIndex = circles.findIndex(circle => 
    circle.day === uavIndex && circle.hour === normalizedFreq
  );
  
  if (existingCircleIndex !== -1) {
    // 更新现有圆圈的大小
    circles[existingCircleIndex].size = circleSize;
    console.log('🔄 更新现有圆圈大小:', {
      uavName: uavName,
      uavIndex: uavIndex,
      originalFreq: uavFreq,
      normalizedFreq: normalizedFreq,
      detectionCount: detectionCount,
      newSize: circleSize
    });
  } else {
    // 创建新的圆圈数据
    const circle = {
      day: uavIndex, // 使用无人机在列表中的索引作为行号
      hour: normalizedFreq, // 使用归一化后的频率作为横坐标
      size: circleSize, // 根据检出次数计算直径
      id: Date.now() + Math.random() // 唯一ID
    };
    
    // 添加到圆圈数组
    circles.push(circle);
    
    console.log('✅ 添加新无人机检测圆圈:', {
      uavName: uavName,
      uavIndex: uavIndex,
      originalFreq: uavFreq,
      normalizedFreq: normalizedFreq,
      detectionCount: detectionCount,
      circle: circle
    });
  }
  
  // 启动定时更新（如果还没有启动）
  startUpdateTimer();
}

// 提取无人机名称并保存到全局变量
function extractUavNames(data) {
  if (data.msg === 'UAV_LIB' && data.uavDetectTemplate && Array.isArray(data.uavDetectTemplate)) {
    // 保存完整的无人机库数据到全局变量
    globalUavLib = data.uavDetectTemplate;
    
    // 提取所有无人机名称并保存到全局变量
    globalUavNames = data.uavDetectTemplate.map(uav => uav.name || '未命名');
    
    console.log('=== 无人机库数据已保存到全局变量 ===');
    console.log('总数量:', globalUavNames.length);
    console.log('名称数组:', globalUavNames);
    console.log('完整数据已保存到 globalUavLib');
    console.log('');
    
    // 按序号显示每个名称
    globalUavNames.forEach((name, index) => {
      console.log(`${index + 1}. ${name}`);
    });
    
    console.log('=== 无人机库名称列表结束 ===');
    console.log('💾 数据已保存到全局变量:');
    console.log('   - globalUavLib: 完整无人机库数据');
    console.log('   - globalUavNames: 无人机名称数组');
    
    // 更新散点图的纵坐标
    updateChartYAxis();
    
    return globalUavNames;
  } else {
    console.log('❌ 数据格式错误，无法提取无人机名称');
    console.log('数据:', data);
    return [];
  }
}

// 初始化图表（根据无人机列表）
function updateChartYAxis() {
  if (globalUavNames.length === 0) {
    console.log('无人机列表为空，无法初始化图表');
    return;
  }
  
  console.log('开始初始化图表，无人机数量:', globalUavNames.length);
  window.days = globalUavNames;
  
  // 重新生成title和singleAxis
  let title = [];
  let singleAxis = [];
  
  // 清空并重新生成series数组
  series = [];
  
  const rowHeight = 16;
  const startTop = 12;
  
  window.days.forEach(function (day, idx) {
    title.push({
      textBaseline: 'middle',
      top: startTop + (idx * rowHeight) + (rowHeight / 2) + 'px',
      left: 10,
      text: day,
      textStyle: {
        fontSize: 10,
        fontWeight: 'bold',
        color: '#333'
      }
    });
    
    singleAxis.push({
      left: 120,
      type: 'category',
      boundaryGap: false,
      data: hours,
      top: startTop + (idx * rowHeight) + 'px',
      height: rowHeight - 2 + 'px',
      axisLabel: {
        interval: function(index, value) {
          return value % 500 === 0;
        },
        fontSize: 8,
        color: '#666'
      },
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#ddd'
        }
      }
    });
    
    // 重新生成series数据
    series.push({
      singleAxisIndex: idx,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: [],
      symbolSize: function (dataItem) {
        return Math.max(2, dataItem[1] * 2); // 直径直接对应大小
      },
      itemStyle: {
        color: function(params) {
          const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff'];
          return colors[idx % colors.length];
        },
        opacity: 0.8,
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          opacity: 1,
          borderWidth: 2
        }
      }
    });
  });
  
  // 更新图表选项
  if (window.myChart) {
    const newOption = {
      backgroundColor: 'transparent',
      tooltip: {
        position: 'top',
        backgroundColor: 'rgba(0,0,0,0.8)',
        borderColor: 'transparent',
        textStyle: {
          color: '#fff',
          fontSize: 12
        },
        formatter: function(params) {
          const day = window.days[params.seriesIndex];
          const hour = hours[params.data[0]];
          const value = params.data[1];
          return `${day}<br/>频点: ${hour}<br/>检出次数: ${value}`;
        }
      },
      title: title,
      singleAxis: singleAxis,
      series: series,
      animation: true,
      animationDuration: 1000,
      animationEasing: 'cubicOut'
    };
    
    console.log('准备更新图表配置:', newOption);
    
    window.myChart.setOption(newOption, true); // 添加第二个参数true，表示完全替换配置
    
    console.log('图表纵坐标已更新为无人机列表');
    console.log('更新后的days数组:', window.days);
    console.log('更新后的title数量:', title.length);
    console.log('更新后的singleAxis数量:', singleAxis.length);
    console.log('更新后的series数量:', series.length);
    console.log('图表初始化完成，显示', window.days.length, '行无人机名称');
    
    // 添加窗口大小调整监听器
    window.addEventListener('resize', window.myChart.resize);
    
    // 将series赋值给全局变量
    window.series = series;
  } else {
    console.log('❌ myChart未初始化，无法更新图表');
  }
}

